<template>
	<div class="page-container">
		<h1>颜色转换工具</h1>
		<el-row>
			<el-col :span="24">
				<el-form ref="form" :model="form" label-position="top">
					<el-form-item label="请输入颜色代码">
						<el-input v-model="form.colorInput"></el-input>
					</el-form-item>
				</el-form>
			</el-col>
			<el-col :span="24" v-if="result.hexResult">
				<div class="color-box" :style="{ backgroundColor: result.hexResult }"></div>
			</el-col>
		</el-row>
		<el-button type="primary" @click="convert()">转换</el-button>
		<div class="result-container">
			
			<div class="result-text">
				<p>十六进制：<span>{{ result.hexResult }}</span></p>
				<p>RGB 颜色值（数字）：<span>{{ result.rgbResult }}</span></p>
				<p>RGB 颜色值（百分比）：<span>{{ result.rgbPercentResult }}</span></p>
				<p>HSL 颜色值：<span>{{ result.hslResult }}</span></p>
				<p>HSV 颜色值：<span>{{ result.hsvResult }}</span></p>
			</div>
		</div>
		
	</div>
</template>

<script>
	import tinycolor from 'tinycolor2';

	export default {
		data() {
			return {
				form: {
					colorInput: "",
				},
				result: {
					hexResult: "",
					rgbResult: "",
					rgbPercentResult: "",
					hslResult: "",
					hsvResult: "",
				},
			};
		},
		methods: {
			convert() {
				const colorInput = this.form.colorInput;

				// 解析颜色代码
				const color = tinycolor(colorInput);

				// 计算各种格式的颜色值
				const hexResult = color.toHexString();
				const rgbResult = color.toRgbString();
				const rgbPercentResult = color.toPercentageRgbString();
				const hslResult = color.toHslString();
				const hsvResult = color.toHsvString();

				// 更新页面显示的转换结果
				this.result.hexResult = hexResult;
				this.result.rgbResult = rgbResult;
				this.result.rgbPercentResult = rgbPercentResult;
				this.result.hslResult = hslResult;
				this.result.hsvResult = hsvResult;
			},
		},
	};
</script>

<style>
	.color-box {
		width: 100%;
		height: 85px;
		border-radius: 10px;
		margin-bottom: 20px;
	}
</style>
